<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      >
<head th:replace="fragments/tabhead::headc"></head>

<style>
	.w120{
		width:100px;
	}
	.w200{
		width:200px;
	}
	.layrow{
		margin:10px auto;
	}
	.codeBox{
		width:130px;
		margin:0 auto;
	}
	.ts-title{
		
	}
</style>
<body>
<th:block layout:fragment="content">
			
                <div style="width:100%;height:800px;margin:0;padding:0;">
                    <div style="width:500px;margin:0 auto;">
                        <div class="ts-title">
                            <h2>免费注册</h2>
                        </div>
                        <div class="codeBox">
                            <div class="text-center">
                                <img src="/img/qr_code.jpg" alt="" style="width:120px;height:120px;" ">
                                <span class="codeText">扫描关注微信公众号 <br>获取相关信息</span>
                            </div>
                        </div>
                        <div style="width:400px;margin:0 auto;">
                        <form class="layui-form" action="" id="orderEditForm">
                        
                            <div class="layui-row layrow">
                                <label class="layui-col-xs3 layui-col-sm3 layui-col-md3 w120">邮箱：</label>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 w200"><input class="layui-input" id="email" lay-verify="required|email" name="email" placeholder="邮箱" type="text"></div>
                                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 w120 error">
                                    *必填
                                </div>
                            </div>
                            <div class="layui-row layrow">
                                <label class="layui-col-xs3 layui-col-sm3 layui-col-md3 w120">手机号：</label>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 w200"><input class="layui-input" id="phone" lay-verify="required|number" name="phone" placeholder="手机号" type="text"></div>
                                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 w120 error">
                                    *必填
                                </div>
                            </div>
                            <div class="layui-row layrow">
                                <label class="layui-col-xs3 layui-col-sm3 layui-col-md3 w120">验证码：</label>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 w200">
                                    <input class="layui-input" id="code" name="code" placeholder="验证码" type="text">
                                    <button class="layui-btn">获取验证码</button>
                                </div>
                                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 w120 error">
									*必填
                                </div>
                            </div>
                            <div class="layui-row layrow">
                                <label class="layui-col-xs3 layui-col-sm3 layui-col-md3 w120">输入密码：</label>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 w200">
                                    <input class="layui-input" id="password" lay-verify="required" name="password" placeholder="登录密码" type="password">
                                </div>
                                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 w120">
                                    *必填
                                </div>
                            </div>
                            <div class="layui-row layrow">
                                <label class="layui-col-xs3 layui-col-sm3 layui-col-md3 w120">再次输入密码：</label>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 w200">
                                    <input class="layui-input" id="repassword" lay-verify="required" name="repassword" placeholder="确认登录密码" type="password">
                                </div>
                                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 w120 error">
                                    *必填
                                </div>
                            </div>
                            <div class="layui-row layrow">
                                <label class="layui-col-xs3 layui-col-sm3 layui-col-md3 w120">公司名称：</label>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 w200">
                                    <input class="layui-input" id="companyName" lay-verify="required" name="companyName" placeholder="公司名称" type="text">
                                </div>
                                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 w120 error">
                                    *必填
                                </div>
                            </div>
                            <div class="layui-row layrow">
                                <label class="layui-col-xs3 layui-col-sm3 layui-col-md3 w120">公司地址：</label>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 w200">
                                    <input class="layui-input" id="companyAddress" lay-verify="required" name="address" placeholder="公司地址" type="text">
                                </div>
                                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 w120 error">
                                    *必填
                                </div>
                            </div>
                            <div class="layui-row layrow">
                                <label class="layui-col-xs3 layui-col-sm3 layui-col-md3 w120">公司联系人：</label>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 w200">
                                    <input class="layui-input" id="companyContact" lay-verify="required" name="contact" placeholder="公司联系人" type="text">
                                </div>
                                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 w120 error">
                                    *必填
                                </div>
                            </div>
                            <div class="layui-row layrow">
                                <label class="layui-col-xs3 layui-col-sm3 layui-col-md3 w120">推荐人</label>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 w200">
                                    <input class="layui-input" id="referee" name="referee" lay-verify="required" placeholder="推荐人" type="text" value="888888">
                                </div>
                                <div class="layui-col-xs3 layui-col-sm3 layui-col-md3 w120 error">
                                    *必填
                                </div>
                            </div>
                            <div class="layui-row layrow">
                            	<div style="margin:0 auto;width:64px;">
                                	<button class="layui-btn" lay-submit="" lay-filter="formSubmit">确定</button>
                                </div>
                            </div>
                        </form>
                        </div>
                    </div>
                </div>
        
<script>
layui.use('form', function(){
		var form = layui.form;
		form.render();
		
		var submit=false;
		$("#repassword").blur(function(){
			if($("#repassword").val() == $("#password").val()){
				submit=true;
			}else{
				layer.msg("两次密码不一致！");
			}
			
		});
		
		form.on('submit(formSubmit)', function(data){
	  		if(!submit){
	  			layer.msg("两次密码不一致！");
	  			return false;
	  		}
	  		 
	  		$.ajax({
	            type: "POST",
	            url: "/registerSave",
	            data: $("#orderEditForm").serializeJson(),
	            dataType: "json",
	            success: function(data){
	            	if(data.code==200){
	           	    //更新表格数据
	           	    layer.msg(data.result,{icon: 6});
	           	    
	            	}else{
	            		layer.msg(data.result,{icon: 2});
	            	}
	            }
	           });
	  		return false;
	  	 })
	  	 
	 
	});  
</script>

</th:block>
</body>
</html>